<template>
  <div class="first">
    <div class="one right">
      <ul>
        <li @click="lookEmail('/mail/index')">
          <img src="../../../public/img/home1.png" alt="">
          <div class="static-detail">
            <p>本月收到邮件</p>
            <h1 title="点击查看邮件详情">{{info.receptionNumber}}<span>封</span></h1>
          </div>
        </li>
        <li @click="lookEmail('/mail/send/index')">
          <img src="../../../public/img/home2.png" alt="">
          <div class="static-detail">
            <p>本月发出邮件</p>
            <h1 title="点击查看邮件详情">{{info.sendNumber}}<span>封</span></h1>
          </div>
        </li>
        <li @click="lookEmail('/mail/unread')">
          <img src="../../../public/img/home3.png" alt="">
          <div class="static-detail">
            <p>未读邮件</p>
            <h1 title="点击查看邮件详情">{{info.unreadNumber}}<span>封</span></h1>
          </div>
        </li>
        <li @click="lookEmail('/mail/pending/index')">
          <img src="../../../public/img/home4.png" alt="">
          <div class="static-detail">
            <p>待处理邮件</p>
            <h1 title="点击查看邮件详情">{{info.waitNumber}}<span>封</span></h1>
          </div>
        </li>
      </ul>
    </div>
    <div class="one left">
      <div class="left-content">
        <h1 class="right-top">
          <el-select v-model="country" size="small" @change="handleChange">
            <el-option v-for="item,index in timeArr" :key="index"
                       :label="item.name" :value="item.type">{{item.name}}
            </el-option>
          </el-select>
          <span class="time">【{{currentDay}}】</span>
        </h1>
        <div class="time-detail">
          <span>{{currentTime.substring(0,14)}}</span>
          <ul>
            <li>{{currentTime.substring(15,16)}}{{currentTime.slice(16,17)}}</li>
            <li class="diandian">:</li>
            <li>{{currentTime.slice(18,19)}}{{currentTime.slice(19,20)}}</li>
            <li class="diandian">:</li>
            <li>{{currentTime.slice(21,22)}}{{currentTime.slice(22,23)}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {emailStatic} from '@/api/home'
    import {timeUTC,getTodayCalendar} from '@/util/util'
    import {mapState} from 'vuex'

    export default {
        name: "First",
        data() {
            return {
                staticType: '',
                country: '8',
                currentTime: '',
                timeArr: [
                    {name: 'GMT-9：阿拉斯加时间', type: '-9'},
                    {name: 'GMT-8：太平洋时间', type: '-8'},
                    {name: 'GMT-7：山脉时间', type: '-7'},
                    {name: 'GMT-6：中央标准时间', type: '-6'},
                    {name: 'GMT-5：东部时间', type: '-5'},
                    {name: 'GMT-4：太平洋时间', type: '-4'},
                    {name: 'GMT-3：巴西利亚时间', type: '-3'},
                    {name: 'GMT-2：大西洋中部时间', type: '-2'},
                    {name: 'GMT-1：亚述尔群岛', type: '-1'},
                    {name: 'GMT：伦敦时间', type: '0'},
                    {name: 'GMT+1：罗马，巴黎', type: '1'},
                    {name: 'GMT+2：雅典，以色列', type: '2'},
                    {name: 'GMT+3：莫斯科，科威特', type: '3'},
                    {name: 'GMT+4：喀布尔时间', type: '4'},
                    {name: 'GMT+5：伊斯兰堡，卡拉奇', type: '5'},
                    {name: 'GMT+6：阿拉木图，科伦坡', type: '6'},
                    {name: 'GMT+7：曼谷，雅加达', type: '7'},
                    {name: 'GMT+8：北京，香港，台湾', type: '8'},
                    {name: 'GMT+9：东京时间', type: '9'},
                    {name: 'GMT+10：悉尼时间', type: '10'},
                ],
                info: {receptionNumber: 0, sendNumber: 0, unreadNumber: 0, waitNumber: 0},
                timer: null,
                currentDay: ''
            }
        },
        computed: {
            ...mapState(['common'])
        },
        mounted() {
            this.getData();
            // 执行定时任务
            this.getTime();
            this.currentTime = timeUTC(parseInt(this.country), new Date())
            this.currentDay = getTodayCalendar(this.currentTime);
        },
        methods: {
            lookEmail(path) {
                if (this.common.emailList.length == 0) {
                    this.$confirm(' <div style="margin: 20px 10px;">\n' +
                        '        <p style="line-height: 30px;\n' +
                        '        font-size: 14px;">您需要先绑定自己的常用邮箱到我们的平台，才可以使用邮件模块功能哦！</p>\n' +
                        '        <p style="line-height: 30px;\n' +
                        '        font-size: 14px;">点击下方的按钮即可立即去绑定。</p>\n' +
                        '      </div>', '邮箱绑定提醒', {
                        dangerouslyUseHTMLString: true,
                        closeOnClickModal:false,
                        closeOnPressEscape:false,
                        confirmButtonText: '去绑定',
                        cancelButtonText: '取 消',
                    }).then(()=>{
                        this.$store.commit('SET_CURRENTSETFRAG', 'eight')
                        this.$router.push('/mail/administration');
                    }).catch(()=>{})
                    return;
                }
                let frag = 0;
                if (path == '/mail/index') {
                    frag = 0
                } else if (path == '/mail/send/index') {
                    frag = 3
                } else if (path == '/mail/pending/index') {
                    frag = 1
                }else if(path=='/mail/unread'){
                    frag=6;
                }
                this.$router.push(path);
                this.$nextTick(() => {
                    this.$store.commit('SET_ISFRAG', frag);
                })
            },
            getTime() {
                this.timer = setTimeout(() => {
                    clearTimeout(this.timer)
                    this.interval(this.country)
                    this.getTime();
                }, 1000)
            },
            interval() {
                this.currentTime = timeUTC(parseInt(this.country), new Date())
            },
            //时间转换时区
            handleChange(val) {
                this.currentTime = timeUTC(parseInt(val), new Date())
                //获取当前日历
                this.currentDay = getTodayCalendar(this.currentTime)
            },
            getData() {
                emailStatic().then(res => {
                    if (res.data.success) {
                        this.info = res.data.data;
                    }
                })
            }
        },
        destroyed() {
            clearTimeout(this.timer);
            this.timer = null;
        }
    }
</script>

<style lang="scss">
  .common-line {
    width: 2px;
    height: auto;
    background: linear-gradient(91deg, #6277f3d9 0%, #e5e8ff 100%);
  }

  .first {
    display: flex;
    margin: 0 0 20px 0;
    justify-content: space-between;

    .one {
      width: 46%;
      border-radius: 10px;
    }

    .left {
      width: 49%;
      background-color: #fff;

      .left-content {
        padding: 13px 15px 5px 15px;
      }
    }

    .right {
      width: 49%;
    }

    .time-detail {
      margin-top: 9px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;

      span {
        font-size: 33px;
        color: #325993;
        font-weight: 500;
      }

      ul {
        display: flex;

        li {
          width: 50px;
          line-height: 50px;
          text-align: center;
          color: #fff;
          background-color: #325993;
          font-size: 27px;
          border-radius: 10px;
        }

        .diandian {
          width: 21px;
          line-height: 38px;
          font-size: 44px;
          color: #325993;
          background-color: #fff;
        }
      }
    }

    .right-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 52px;
      color: #fff;
      background: linear-gradient(91deg, rgba(139, 196, 248, 1) 0%, rgba(169, 209, 250, 1) 100%);
      border-radius: 10px;
      padding: 0 15px;
      overflow: hidden;

      .el-select {
        width: 283px;

        input.el-input__inner {
          color: #fff;
          font-size: 18px;
          background-color: transparent;
          border: 0;
        }

        .el-select__caret {
          color: #fff;
          font-size: 23px;
        }
      }

      span.time {
        float: right;
        font-size: 21px;
      }
    }

    .right {
      ul {
        display: flex;
        justify-content: space-between;

        li {
          background-color: #fff;
          border-radius: 10px;
          padding: 15px 20px;
          text-align: center;
          color: #435B77;

          img {
            width: 100px;
            height: 62px;
          }

          h1 {
            font-size: 17px;
            border-bottom: 1px solid #435B77;
            width: auto;
            display: inline-block;
            padding: 0 3px;
            cursor: pointer;

            span {
              font-size: 19px;
              font-weight: normal;
            }
          }

          p {
            font-size: 15px;
          }
        }

        li:nth-child(3) {
          color: #D56A52;

          h1 {
            border-color: #D56A52;
          }
        }
      }
    }
  }

  @media screen and (max-width: 1300px) {
    .first .time-detail span {
      font-size: 24px;
    }
    .first .right ul li {
      padding: 11px 15px
    }
    .first .time-detail {
      margin-top: 8px;
    }
    .second .left .left-top ul {
      width: 70% !important;
    }
    .first .right-top .el-select input.el-input__inner {
      font-size: 16px;
    }
    .first .right-top span.time {
      font-size: 20px;
    }
  }

  @media screen and (min-width: 1800px) {
    .first .time-detail ul li {

    }

  }

  @media screen and (max-width: 1400px) {
    .first .time-detail ul li {
    }
  }
</style>
